<template>
   <a class="tw-liblink"
    :href="data.href"
    :target="data.target || '_self'"
    @click="clickLink">
     <img class="xicon"
      :style="{height:iconHeight, marginBottom: marginIcon}"
      v-if="getIcons('default')"
      :src="`${$twApp.fileBaseUrl}${getIcons('default').localPath}`" />
    <img class="xhovericon"
      :style="{height:iconHeight, marginBottom: marginIcon}"
      v-if="getIcons('hover')"
      :src="`${$twApp.fileBaseUrl}${getIcons('hover').localPath}`" />
      <span v-if="data.html" v-html="data.html"></span>
      <span v-else>{{data.text}}</span>
    <img
      :style="{height:iconHeight, marginBottom: marginIcon}"
      v-if="rightIcons.length > 0"
      :src="`${$twApp.fileBaseUrl}${getIcons('right').localPath}`" />
   </a>
</template>

<script>
import props from './props'

export default {
  name: 'header-navigate',

  props,

  data() {
    return {
      collapsed: true
    }
  },

  computed: {
    style () {
      return {
        lineHeight: this.lineHeight,
        letterSpacing: this.letterSpacing,
        fontFamily: this.fontFamily,
        fontSize: this.fontSize,
        fontWeight: this.fontWeight ? '700' : '400',
        color: this.color,
        hoverColor: this.hoverColor,
        shadow: this.shadow,
        shadowSize: this.shadowSize,
        textAlign: this.align,
        iconOffsetTop: this.iconOffsetTop,
        paddingSet: this.paddingSet,
        backgroundColor: this.backgroundColor
      }
    }
  },

  methods: {
    getIcons (type) {
      if (type === 'right') {
        return this.rightIcons[0]
      } else if (type === 'default') {
        return this.icons[0]
      } else {
        return this.hoverIcons[0] || this.icons[0]
      }
    },

    setStyle () {
      let style = `
        ::root.tw-liblink {
          line-height: ${this.lineHeight};
          font-family: ${this.fontFamily};
          font-size: ${this.fontSize};
          font-weight: ${this.style.fontWeight};
          color: ${this.color};
          text-align: ${this.align};
          padding: ${this.paddingSet};
          background-color: ${this.backgroundColor};
        }

        ::root.tw-liblink:hover {
          color: ${this.hoverColor};
        }
      `

      if (this.letterSpacing) {
        style += `
          ::root.tw-liblink {
            letter-spacing: ${this.letterSpacing};
          }
        `
      }

      if (this.iconOffsetTop) {
        style += `
          .tw-liblink > .xicon {
            position: relative;
            margin-right: ${this.iconSpacing || 0};
            top: ${this.iconOffsetTop}
          }
        `
      }

      if (this.shadow) {
        style += `
          ::root.tw-liblink {
            text-shadow: ${this.shadow ? `${this.shadowSize} ${this.shadow}` : 'none'};
          }
        `
      }

      this.addStyle(style)
    },

    addStyle (style) {
      this.$el.classList.add(`x${this._uid}`)
      const styleEl = document.getElementById(this._uid) || document.createElement('style')
      styleEl.id = this._uid
      styleEl.innerText = style.replace(/::root/gm, `.x${this._uid}`).replace(/\n/gm, '')

      document.head.appendChild(styleEl)
    },

    clickLink (e) {
      if (typeof this.clickFn === 'function') {
        e.preventDefault()
        this.clickFn(this.data)
      }

      if (this.enableClickEvent) {
        e.preventDefault()
        this.$emit('click', this.data)
      }
    }
  },

  mounted () {
    this.setStyle()
  },

  watch: {
    style: {
      deep: true,
      handler () {
        this.setStyle()
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
